﻿@using Personalblog.Utils
@using PersonalblogServices.Articels.Dto
@using Personalblog.Model.ViewModels
@using X.PagedList.Mvc.Core
@using X.PagedList.Web.Common
@model BlogListViewModel

@{
    ViewData["Title"] = "文章列表";
}

<style type="text/css">
    .treeview .list-group-item {
        cursor: pointer
    }

    .treeview span.icon {
        width: 12px;
        margin-right: 5px
    }

    .treeview .node-disabled {
        color: silver;
        cursor: not-allowed
    }

    .node-categories {
    }

        .node-categories:not(.node-disabled):hover {
            background-color: #F5F5F5;
        }
</style>
@{
    <div class="container px-4 py-3">
        <h2 class="d-flex w-100 justify-content-between pb-2 mb-3 border-bottom">
            <div>Blog / @Model.CurrentCategory.Name</div>
            <div>@Model.Posts.TotalItemCount.ToString() Posts</div>
        </h2>
        <div class="row">
            <!--这是文章列表-->
            <div class="col-lg-3 mb-3 treeview" id="categories">
               
            </div>
            <div class="col-lg-9">
                @if (Model.Posts.Count == 0)
                {
                    <partial name="Widgets/NoPostCard" />
                }
                @foreach (var post in Model.Posts)
                {
                    <partial name="BlogListArtice" model="post" />
                }
            </div>
        </div>
        <nav aria-label="Page navigation example">
            @Html.PagedListPager(Model.Posts, page => Url.Action(RazorHelper.GetCurrentActionName(ViewContext), new {page, categoryId = Model.CurrentCategoryId}),
        new PagedListRenderOptions {
        LiElementClasses = new[] {"page-item"},
        PageClasses = new[] {"page-link"},
        UlElementClasses = new[] {"pagination justify-content-center"}
        })
        </nav>
    </div>
}
@section bottom {
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    @* <script src="~/lib/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script> *@
    <script src="/js/bootstrap-treeview.js"></script>
    <script src="/lib/boldList.js"></script>
    <script>
        const categories = '@Html.Raw(Model.CategoryNodesJson)'
        initTreeView(categories);
    </script>
}
